<template>
	<view class="information">
		<u-toast ref="uToastc" />
		<view class="header">
			<view class="midltitle">信息中心</view>
		</view>
		<view class="catainer">
			<view class="catainerBot">
				<view class="left">
					共 {{allCount}}条，其中 <image src="../../static/images/point.png" class="point"></image>
					<text class="nored">未读{{notRead}}条</text>
				</view>
				<view class="right" @click="knowRead" v-if="notRead>0">
					<image src="../../static/images/read.png" class="read"></image>
					一键已读
				</view>
				<view class="right" v-else>
					<image src="../../static/images/read.png" class="read"></image>
					全部已读
				</view>
			</view>
		</view>
		<view class="InfoCatin">
			<view class="inforCard" v-for="(item,index) in infoMessagdata" :key="index">
				<view class="inforCardItem" @click="handlerdetail(item)">
					<view class="cardTop">
						<view class="title">
							<view class="titleBack0" v-if="item.readStatus==0"></view>
							<view class="titleBack1" v-if="item.readStatus==1"></view>
							{{item.title}}
						</view>
						<view class="data"> {{item.createTime}}</view>
					</view>
					<view class="textBot">
						{{item.message}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	import {
		histMessage,
		updateAllRead,
		getCount
	} from "@/api/information.js"
	const infoMessagdata = ref([])
	// 消息提示引用
	const uToastc = ref(null)
	const allCount = ref(0)
	const notRead = ref(0)
	const histInfo = async () => {
		const res = await histMessage()
		if (res.code == 200) {
			infoMessagdata.value = res.rows
		}
		const red = await getCount()
		console.log(323, red);
		if (red.code == 200) {
			allCount.value = red.data.allCount
			notRead.value = red.data.notRead
		}
	}
	const knowRead = async () => {
		const res = await updateAllRead()
		console.log(1212, res);
		if (res.code == 200) {
			uToastc.value.show({
				title: '全部已读',
				type: 'success',
				message: '全部已读',
				position: 'top'
			})
		}
	}
	//处理详情
	const handlerdetail = (item) => {
		item.pageType = 'message'
		let params = JSON.stringify(item)

		uni.navigateTo({
			url: `/pages/checkdetail/checkdetail?params=${params}`,
		})
	}
	onMounted(() => {
		histInfo()
	})
</script>

<style lang="scss" scoped>
	.information {
		width: 100%;
		// height: calc(100vh - 100rpx);
		height: 100vh;
		background: url('../../static/images/information.png') no-repeat;
		background-size: 100%;
		background-color: #FAFAFA;

		.header {
			width: 100%;
			height: 134rpx;
			// border: 1px solid red;

			.midltitle {
				width: 100%;
				height: 100rpx;
				text-align: center;
				color: #fff;
				line-height: 160rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
			}
		}

		.catainer {
			width: 92%;
			height: 21vh;
			margin: auto;
			display: flex;
			align-items: flex-end;
			margin-bottom: 20rpx;

			.catainerBot {
				width: 96%;
				height: 8vh;
				background-color: rgba(255, 255, 255, 0.9);
				box-shadow: 0px 0px 30px 0px rgba(70, 136, 211, 0.3);
				border-radius: 10rpx;
				padding: 0 2%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: PingFang SC;
				font-size: 30rpx;
				color: #333333;
				line-height: 60rpx;


				.point {
					width: 14rpx;
					height: 15rpx;
				}

				.nored {
					color: #ff0000;
				}

				.right {
					color: #1296DB;

					.read {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}

		.InfoCatin {
			width: 92%;
			height: 66vh;
			margin: auto;
			overflow-y: auto;

			.inforCard:first-child {
				margin-top: 0;
			}



			.inforCard {
				width: 100%;
				// height: 20vh;
				background-color: rgba(255, 255, 255, 0.9);
				box-shadow: 0px 0px 30px 0px rgba(70, 136, 211, 0.1);
				border-radius: 14rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 20rpx 0;
				margin-top: 20rpx;

				.inforCardItem {
					width: 92%;

					.cardTop {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.title {
							display: flex;
							align-items: center;
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 36rpx;
							color: #333333;
							line-height: 60rpx;
						}

						.data {
							font-family: PingFang SC;
							font-size: 30rpx;
							color: #666666;
							line-height: 60rpx;
						}
					}

					.textBot {
						width: 90%;
						margin-left: 60rpx;
						font-family: PingFang SC;
						font-size: 30rpx;
						color: #333333;
					}
				}
			}

			.titleBack1 {
				width: 50rpx;
				height: 54rpx;
				background: url('../../static/images/ll1.png') no-repeat;
				background-size: 100%;

			}

			.titleBack0 {
				width: 50rpx;
				height: 54rpx;
				background: url('../../static/images/ll2.png') no-repeat;
				background-size: 100%;

			}
		}
	}
</style>